import { reqLogin, reqLogout } from "@/api/user";

const user = JSON.parse(localStorage.getItem("user")) || {
  name: "",
  token: "",
};

export default {
  // 状态数据
  state: {
    // 用户名
    name: user.name,
    // 用户唯一标识
    token: user.token,
  },
  // 只读的计算属性数据
  getters: {},
  // 如果数据需要发送请求，在更新数据，就需要定义action和mutation
  // 如果数据不需要发送请求，就可以直接更新数据，就只需要定义mutation
  // 异步操作（发送请求）
  actions: {
    // 因为数据是发送请求登录后才获取到的，定义action
    async login({ commit }, { phone, password }) {
      /*
        context 对象，功能和store类似
          state 读取state数据
          getters 读取getters数据
          dispatch 触发action函数
          commit 触发mutation函数

          一般只需要使用commit，所以一般会解构得到commit
        
        第二个参数：dispatch函数传递参数，只能传递一个。多个参数使用对象
      */
      const res = await reqLogin(phone, password);

      commit("LOGIN", res); // 只能传递一个参数给mutation函数
    },
    async logout({ commit }) {
      await reqLogout();
      commit("RESET");
    },
  },
  // 直接更新数据
  mutations: {
    LOGIN(state, res) {
      state.name = res.name;
      state.token = res.token;

      // 持久化存储
      localStorage.setItem(
        "user",
        JSON.stringify({
          name: res.name,
          token: res.token,
        })
      );
    },
    RESET(state) {
      state.name = "";
      state.token = "";
      localStorage.removeItem("user");
    },
  },
  // 不加namespaced: true, 将不同模块的getters、actions、mutations最终合并成一个对象，还是会导致冲突
  // 开启命名空间，此时每个模块的内容就是自己独有的
  namespaced: true,
};
